<template>
  <div class="container">
    <div class="left">
      <template v-for="(item, index) in appGroup" :key="index">
        <GroupBox :title="AppItem.title" ref="groupRef"></GroupBox>
      </template>
    </div>
    <draggable
      class="list-group"
      v-model="message"
      v-bind="data.dragOptions"
      @start="data.drag = true"
      @end="data.drag = false"
      item-key="id"
    >
      <template #item="{ element }" class="list-group-item">
        <AppItem
          v-bind="$attrs"
          :web-name="element.webName"
          :web-url="element.webUrl"
          :icon="element.icon"
          @click.right="mouseClick(element, $event)"
        ></AppItem>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import GroupBox from './cpns/glassbox/GroupBox.vue'
import { computed, reactive, ref, watch } from 'vue'
import draggable from 'vuedraggable'
import AppItem from './AppItem.vue'
const props = defineProps({
  appList: {
    type: Array,
    default: [],
  },
  appGroup: Array,
})
let message = ref([...props.appList])

const data = reactive({
  drag: false,
  list: message,
  dragOptions: {
    animation: 500,
    group: 'description',
  },
  isColumn: false,
})

const changDataList = (target: any) => {
  const curList = data.list.filter((item) => {
    return item.webName !== target.webName
  })
  data.list = curList
  // emit('updateList', curList)
}

const curPos = ref({ posX: 0, posY: 0 })

const emit = defineEmits(['editEvent', 'updateList'])
const mouseClick = (webName: any, e: any) => {
  // console.log('右键点击了')
  // console.log(e.pageX, e.pageY)
  // console.log()
  curPos.value = { posX: e.pageX, posY: e.pageY }
  emit('editEvent', curPos.value, webName)
  e.preventDefault()
  e.stopPropagation()
}
defineExpose({ changDataList })
</script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.left {
  height: 100%;
  border: 1px dashed;
  display: flex;
}
</style>
